<template>
    <div class="chooseCity" ref="chooseCity">
      <div class="topFixed">
        <div class="title">
          <div class="back-wrapper">
            <back></back>
          </div>
          选择城市
        </div>
        <div class="ipt-wrapper">
          <input type="text" class="ipt" placeholder="输入城市名或拼音" v-model="indexes">
          <button class="search" @click="_search">搜索</button>
        </div>
      </div>
      <div class="index-list-wrapper" ref="index-list-wrapper">
        <mt-index-list>
          <div class="location-wrapper">
            <div class="name" id="sTop">定位城市</div>
            <div class="content">
              <div class="item">{{currentCity}}</div>

            </div>
          </div>
          <div class="hot-wrapper">
            <div class="name">热门城市</div>
            <div class="content">
              <div class="item" @click="_setCurrentCity('杭州市','330100')">杭州市</div>
              <div class="item" @click="_setCurrentCity('宁波市','330200')">宁波市</div>
              <div class="item" @click="_setCurrentCity('绍兴市','330600')">绍兴市</div>
              <div class="item" @click="_setCurrentCity('嘉兴市','330400')">嘉兴市</div>
            </div>
          </div>
          <div  v-for="item in cityList" :key="item.index">
            <mt-index-section :index="item.index" v-show="item.arr.length">
              <div v-for="row in item.arr">
                <mt-cell>
                  <div class="row city-line-item" @click="_setCurrentCity(row.value,row.code)" :cityCode="row.allLetter">{{row.value}}</div>
                </mt-cell>
              </div>
            </mt-index-section>
          </div>
        </mt-index-list>
      </div>
    </div>
</template>

<script>
  import { IndexList, IndexSection ,Toast} from 'mint-ui'
  import back from '../../../components/back/back'
  import {getSession, setSession} from "../../../common/js/sessionStorage";
  import global from '../../../common/js/global'
    export default {
        name: "chooseCity",
        components:{
          'back':back
        },
        data(){
          return{
            cityList:[],
            indexes:'',
            currentCity:''
          }
        },
        methods:{
          _search(){
            setTimeout(()=>{
              //卡失去焦点
            let dom = document.getElementsByClassName('city-line-item')
            let zn = new RegExp("[\u4E00-\u9FA5]+")
            let en = new RegExp("[A-Za-z]+")
            //中文状态下判断指定锚点
            if(zn.test(this.indexes)){
              for(let i=0;i<dom.length;i++){
                dom[i].id = ''
                if(dom[i].innerHTML.indexOf(this.indexes)!=-1){
                  dom[i].id = 'mask'
                  document.querySelector("#mask").scrollIntoView(true)
                  return
                }
              }
            }
            //英文状态下判断指定锚点
            if(en.test(this.indexes)){
              console.log('en')
              for(let i=0;i<dom.length;i++){
                dom[i].id = ''

                if(dom[i].getAttribute('cityCode').indexOf(this.indexes.toUpperCase())!=-1){
                  dom[i].id = 'mask'
                  document.querySelector("#mask").scrollIntoView(true)
                  return
                }
              }
            }
            },400)
          },
          _getCityCode(){
            this.$axios(
              {
                method:'get',
                headers:{
                  "Content-Type":"application/json"
                },
                url:global.$host+'/cityList',
              }
            ).then((res)=>{
              let data =res.data.data.cityList
              let A=[],B=[],C=[],D=[],E=[],F=[],G=[],H=[],I=[],J=[],K=[],L=[],M=[],N=[],O=[],P=[],Q=[],R=[],S=[],T=[],U=[],V=[],W=[],X=[],Y=[],Z=[]
              for(let i=0;i<data.length;i++){
                switch (data[i].firstLetter) {
                  case 'A':
                    A.push(data[i])
                        break
                  case 'B':
                    B.push(data[i])
                    break
                  case 'C':
                    C.push(data[i])
                    break
                  case 'D':
                    D.push(data[i])
                    break
                  case 'E':
                    E.push(data[i])
                    break
                  case 'F':
                    F.push(data[i])
                    break
                  case 'G':
                    G.push(data[i])
                    break
                  case 'H':
                    H.push(data[i])
                    break
                  case 'I':
                    I.push(data[i])
                    break
                  case 'J':
                    J.push(data[i])
                    break
                  case 'K':
                    K.push(data[i])
                    break
                  case 'L':
                    L.push(data[i])
                    break
                  case 'M':
                    M.push(data[i])
                    break
                  case 'N':
                    N.push(data[i])
                    break
                  case 'O':
                    O.push(data[i])
                    break
                  case 'P':
                    P.push(data[i])
                    break
                  case 'Q':
                    Q.push(data[i])
                    break
                  case 'R':
                    R.push(data[i])
                    break
                  case 'S':
                    S.push(data[i])
                    break
                  case 'T':
                    T.push(data[i])
                    break
                  case 'U':
                    U.push(data[i])
                    break
                  case 'V':
                    V.push(data[i])
                    break
                  case 'W':
                    W.push(data[i])
                    break
                  case 'X':
                    X.push(data[i])
                    break
                  case 'Y':
                    Y.push(data[i])
                    break
                  case 'Z':
                    Z.push(data[i])
                    break
                }
              }
              let cityList = []
              if(A.length){
                cityList.push({index:'A',arr:A})
              }
              if(B.length){
                cityList.push({index:'B',arr:B})
              }
              if(C.length){
                cityList.push({index:'C',arr:C})
              }
              if(D.length){
                cityList.push({index:'D',arr:D})
              }
              if(E.length){
                cityList.push({index:'E',arr:E})
              }
              if(F.length){
                cityList.push({index:'F',arr:F})
              }
              if(G.length){
                cityList.push({index:'G',arr:G})
              }
              if(H.length){
                cityList.push({index:'H',arr:H})
              }
              if(I.length){
                cityList.push({index:'I',arr:I})
              }
              if(J.length){
                cityList.push({index:'J',arr:J})
              }
              if(K.length){
                cityList.push({index:'K',arr:K})
              }
              if(L.length){
                cityList.push({index:'L',arr:L})
              }
              if(M.length){
                cityList.push({index:'M',arr:M})
              }
              if(N.length){
                cityList.push({index:'N',arr:N})
              }
              if(O.length){
                cityList.push({index:'O',arr:O})
              }
              if(P.length){
                cityList.push({index:'P',arr:P})
              }
              if(Q.length){
                cityList.push({index:'Q',arr:Q})
              }
              if(R.length){
                cityList.push({index:'R',arr:R})
              }
              if(S.length){
                cityList.push({index:'S',arr:S})
              }
              if(T.length){
                cityList.push({index:'T',arr:T})
              }
              if(U.length){
                cityList.push({index:'U',arr:U})
              }
              if(V.length){
                cityList.push({index:'V',arr:V})
              }
              if(W.length){
                cityList.push({index:'W',arr:W})
              }
              if(X.length){
                cityList.push({index:'X',arr:X})
              }
              if(Y.length){
                cityList.push({index:'Y',arr:Y})
              }
              if(Z.length){
                cityList.push({index:'Z',arr:Z})
              }
              this.cityList = cityList
            })
          },
          _getCurrentCity(){
            this.currentCity = getSession('currentCity')
          },
          _setCurrentCity(city,code){
            setSession('currentCity',city)
            setSession('currentCityCode',code)
            if(getSession('currentCity')===city&&getSession('currentCityCode')===code){
              Toast('当前城市设置成功')
              setTimeout(()=>{
                window.history.back(-1)
              },1000)
            }else {
              Toast('当前城市设置失败')
            }
          }
        },
        mounted() {
          this._getCityCode()
          this._getCurrentCity()
        },
    }
</script>

<style scoped lang="stylus">

  .chooseCity
    position absolute
    height 100%
    width 100%
    background #101011
    user-select none
    overflow hidden
    .title
      position relative
      padding 10px 0
      height 22px
      line-height 22px
      text-align center
      font-size 16px
      color #ffffff
      .back-wrapper
        position absolute
        left 0
        top 10px
        width 36px
        height 22px
    .ipt-wrapper
      height 32px
      padding 10px
      text-align left
      font-size 0
      .ipt
        width calc(100% - 101px)
        height 100%
        background #171718 url("btn-search.svg") no-repeat 12px center/17px 16px
        border-radius 4px
        padding-left 40px
        outline none
        color #ffffff
        font-size 13px
      .search
        width 55px
        font-size 12px
        background #f7c20f
        border none
        height 32px
        outline none
        margin-left 6px
        border-radius 3px
    .location-wrapper
      height 73px
      .name
        height 37px
        line-height 37px
        padding 0 10px
        text-align left
        color #8B929E
        font-size 12px
      .content
        height 36px
        line-height 36px
        color #F7C20F
        text-align left
        padding 0 20px
        font-size 14px
        background #171718
    .hot-wrapper
      .name
        height 37px
        line-height 37px
        text-align left
        padding 0 10px
        font-size 12px
        color #8B929E
      .content
        padding 0 23px
        overflow hidden
        .item
          float left
          width 33.333%
          text-align left
          height 44
          color #F2F2F2
          padding 12px 0
          font-size 14px
  .row
    position absolute
    top 0
    left 0
    width 100%
    height 36px
    line-height 36px
    text-align left
    padding-left 24px
    color #F2F2F2

</style>
